<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions" @page-change="handlePageChange">
    <!--将表单放在工具栏中-->
    <template #toolbar>
      <div flex items-center justify-between>
        <n-space>
          <vxe-form :data="formData" @submit="searchEvent" @reset="resetEvent">
            <slot name="formSlot"></slot>
          </vxe-form>
        </n-space>
        <n-space>
          <n-button circle @click="changeMaximize">
            <template #icon>
              <n-icon>
                <IconCompressOutlined v-show="xGrid?.reactData.isZMax" />
                <IconExpandOutlined v-show="!xGrid?.reactData.isZMax" />
              </n-icon>
            </template>
          </n-button>
          <n-button circle @click="gridGoTop">
            <template #icon>
              <n-icon><IconGoTop /></n-icon>
            </template>
          </n-button>
        </n-space>
      </div>
    </template>
    <!--自定义空数据模板-->
    <template #empty>
      <div style="color: red">
        <p>没有更多数据了！</p>
      </div>
    </template>
  </vxe-grid>
</template>

<script setup>
import { reactive, ref, nextTick } from 'vue'
import { IconGoTop, IconExpandOutlined, IconCompressOutlined } from '@/components/app-icons/index.js'
const props = defineProps({
  provideConfig: {
    type: Object,
    default: () => ({
      gridOptions: Object,
      formData: Object,
      getDataMethod: Function,
    }),
  },
})
const xGrid = ref(null)
let formData = reactive({ ...props.provideConfig.formData })
const gridOptions = reactive({
  loading: false,
  showOverflow: true,
  border: true,
  height: 'auto',
  rowConfig: {
    keyField: 'id',
  },
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    currentPage: 1,
    pageSize: 5,
    pageSizes: [5, 15, 20, 50, 100, 200],
    total: 0,
  },
  radioConfig: {
    reserve: true,
    highlight: true,
  },
  data: [],
  columns: [],
  ...props.provideConfig.gridOptions,
})
const gridGoTop = () =>
  nextTick(() => {
    const $xGrid = xGrid.value
    $xGrid && $xGrid.scrollTo(0, 0)
  })
const changeMaximize = () => {
  const $xGrid = xGrid.value
  ;($xGrid.reactData.isZMax && $xGrid.revert()) || $xGrid.maximize()
}
const getDataMethod = async () => {
  let {
    pagerConfig: { pageSize, currentPage },
  } = gridOptions
  let params = { pageSize, currentPage, ...formData }
  await gridGoTop()
  try {
    gridOptions.loading = true
    let res = await props.provideConfig.getDataMethod(params)
    gridOptions.data = res.data
    gridOptions.pagerConfig.total = res.total
  } finally {
    gridOptions.loading = false
  }
}
const handlePageChange = (e) => {
  let { currentPage, pageSize } = e
  Object.assign(gridOptions.pagerConfig, { currentPage, pageSize })
  getDataMethod()
}
const searchEvent = () => {
  gridOptions.pagerConfig.currentPage = 1
  getDataMethod()
}
const resetEvent = () => {
  Object.assign(formData, props.provideConfig.formData)
  gridOptions.pagerConfig.currentPage = 1
  getDataMethod()
}
getDataMethod()
</script>

<style lang="scss"></style>
